<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>CheckBox Tree &amp; ArcGIS API for JavaScript | Place Finding</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="../../themes/claro/claro.css">

    <style>
      html, body, #container { height:99%; width:100%; margin:0; padding:0; }
      #location {	padding: 5px 0 0 5px; height:99%; width: 260px; float:left; }
      #map { height:99%; width: 900px; position: absolute;	top: 5px;	left: 265px; }
      #tree {	width: 250px;	float: left; border-width:  2px; border-radius: 5px; border-style:"none"}
      #search { display: block;}
      .simpleGeocoder .esriGeocoderContainer { width: 250px; }
    </style>

		<script type="text/javascript">
			var dojoConfig = {
						packages: [
							{ name: "cbtree",location: "/../../../" }
						]
			};
		</script>

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3"></script>
    <script type="text/javascript">
      require(["dojo/ready",
							 "dojo/dom-style",
							 "esri/dijit/Popup",
               "cbtree/Tree",
							 "cbtree/store/ObjectStore", 
               "cbtree/model/ForestStoreModel",
               "cbtree/util/QueryEngine",
               "esri/dijit/Geocoder",
               "esri/map"
              ], function (ready, domStyle, Popup, Tree, ObjectStore, StoreModel, QueryEngine) {

				var popup, map, geocoder, layer, template, symbol;
				var store, model, tree, filter;
				
				ready(function() {
					// create the map
					popup = new Popup(null, dojo.create("div"));
					map = new esri.Map("map",{
						basemap: "topo",
						center: [ -100, 37 ], // long, lat
						zoom: 5,
						infoWindow: popup
					});

					// add a graphics layer for geocoding results
					layer = map.addLayer(new esri.layers.GraphicsLayer({
						id: "results"
					}));

					// create the geocoder
					geocoder = new esri.dijit.Geocoder({ 
						autoNavigate: false, // do not zoom to best result
						maxLocations: 20, // increase number of results returned
						map: map,
						arcgisGeocoder: {
							url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
							name: "Esri World Geocoder",
							placeholder: "Find a place",
							sourceCountry: "USA" // limit search to the United States
						}
					}, "search");
					geocoder.startup();
					geocoder.focus();

					// Create store, model and checkbox tree...
					store  = new ObjectStore();
					model  = new StoreModel({ store:store, query:{type:"parent"} });
					tree   = new Tree( {model:model, showRoot:false, persist:false}, "tree" );
					tree.startup();

					// Create geocoder results filter. (only exact matches)
					filter = QueryEngine( {"feature.attributes.Score":100} );

					symbol = new esri.symbol.PictureMarkerSymbol({
						"angle":0,
						"xoffset":0,
						"yoffset":10,
						"type":"esriPMS",
						"url":"http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png",
						"contentType":"image/png",
						"width":24,
						"height":24
					});
					template = new esri.InfoTemplate("${name}", "${*}");

					// Add event listener to geocoder.
					geocoder.on( "findResults", function(response) {
						// First, filter the locations (exact matches only).
						var data = filter(response.results)
						var name = response.value.replace(/(^|\W)([a-z])/g, function($0){ return $0.toUpperCase(); });
						var id   = name.toLowerCase();

						if (data.length) {
							// First create a parent record, with a specific id....
							store.add( {id:id, name: name, type:"parent", feature:{attributes:{Address_Type:"POI"}}}); 
							data.forEach( function(location) {
								location.feature.attributes.name = location.name;
								location.feature.setSymbol(symbol);
								location.feature.setInfoTemplate(template);
								location.parent = id;
								location.type   = "child";
								
								store.add( location );	// Add location to the store....
							});
							domStyle.set("tree", { borderStyle:"solid"});
						} else {
							alert("No match found for: "+ response.value);
						}
					});

					// Add event listener to the tree
					tree.on( "checkBoxClick", function( item, node, evt ) {
						function setFeatures(item) {
							if (item.type == "child") {
								if(model.getChecked(item)) {
									layer.add(item.feature);
								} else {
									layer.remove(item.feature);
								}
							}
						}
						store.getChildren(item).forEach( setFeatures );
						setFeatures(item);
					});
				});
		});
    </script>
  </head>
  <body class="claro">
		<div id="container">
			<div id="location">
				<div id="search"></div>
				<div id="tree"></div>
			</div>
			<div id="map"></div>
		</div>
  </body>
</html>
